<template>
  <div class="ele-dialog">
    <el-dialog
      v-model="showDialog"
      @before-close="beforeClose"
      destroy-on-close
      :lock-scroll="false"
      :modal="false"
      draggable
    >
      <!-- 在 Dialog 出现时将 body 滚动锁定,lock-scroll,解决出现滚动条的问题 -->
      <template #header>
        <slot name="header"></slot>
      </template>

      <slot name="content"></slot>

      <template #footer>
        <!-- <i>footer</i> -->
        <!-- <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="centerDialogVisible = false"> Confirm </el-button>
        </span> -->
        <slot name="footer"></slot>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

// interface IProps {
//   dialogVisible: boolean
// }
// const props = withDefaults(defineProps<IProps>(), {
//   dialogVisible: false
// })

/*
  Vue的单向数据流的概念，
  直接v-model="props.dialogVisible" 因为识别到子组件中修改了props值。
  会报 Unexpected mutation of "dialogVisible" prop.
  > 加个计算属性再传递过去
*/
// const dialogVisible = computed({
//   get: () => props.dialogVisible,
//   set: (value) => {
//     // 在这里可以添加一些逻辑处理
//     props.dialogVisible = value
//   }
// })
/* 
  这样写不行，当关闭是会内部将dialogVisible改为反，这个变量重新设置会出错
*/

// 添加一个新的响应式变量来实现双向绑定
// const showDialog = ref(props.dialogVisible)

// 监听props.dialogVisible的变化
// watch(
//   () => props.dialogVisible,
//   (value) => {
//     showDialog.value = value
//   }
// )
// watch(showDialog, (value) => {
//   showDialog.value = value
// })
/* 这样也不行 */

// 直接用一个变量
const showDialog = ref(false)
// 用defineExpose暴露，在引用组件中用模板ref或者$parent链获取组件的公开实例
// 用过组件公开实例获取修改属性值
defineExpose({
  showDialog
})

/**
 * dialog关闭的回调
 */
function beforeClose() {
  console.log("beforeClose")
}
</script>

<style lang="less" scoped>
.ele-dialog {
  .titleClass {
    text-align: center;
  }
}
</style>
